<template>
  <div :class="[rootClass]" :style="style" :zoom="getScale()" :proportion="getProportion()">
    <slot></slot>
  </div>
</template>
  
<script>
export default {
  name: '',
  //参数注入
  props: {
    width: {
      type: String,
      default: '1920',
    },
    height: {
      type: String,
      default: '1080',
    },
    autoHeight: Boolean,
    isResizeForBody: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    rootClass() {
      return this.isResizeForBody ? 'resize_body' : 'resize_box';
    }
  },
  data() {

    return {
      style: this.isResizeForBody ? {} : {
        width: this.width + 'px',
        height: this.boxHeight() + 'px',
        // transform: 'scale(1) translate(-50%, -50%)',
        transform: 'scale(1)',
      },

    }
  },
  mounted() {
    this.setScale();
    let timeoutId;
    window.addEventListener('resize', () => {
      clearTimeout(timeoutId)
      timeoutId = setTimeout(() => {
        this.setScale();
        clearTimeout(timeoutId)
      }, 1000)
      // this.Debounce(this.setScale, 1000, false)
    }, false);
  },
  methods: {
    /**
     * 页面尺寸比
     */
    getProportion() {
      const proportion = window.innerWidth / window.innerHeight;
      return proportion;
    },
    boxHeight() {
      if (this.autoHeight) {
        const scale = window.innerWidth / this.width;
        //如果 长宽之比小于2.2则，设置最小高度 (1920/1080 = 1.77777)
        if (this.getProportion() > 2.2) {
          return this.width / 2.2;
        }
        return window.innerHeight / scale;
      }
      return this.height;
    },
    Debounce: (fn, t) => {
      const delay = t || 500
      let timer
      return function () {
        const args = arguments
        if (timer) {
          clearTimeout(timer)
        }
        const context = this
        timer = setTimeout(() => {
          timer = null
          fn.apply(context, args)
        }, delay)
      }
    },
    // 获取放大缩小比例
    getScale() {
      const w = window.innerWidth / this.width
      if (this.autoHeight) {
        return w;
      }
      const h = window.innerHeight / this.boxHeight()
      return w < h ? w : h
    },
    // 设置比例
    setScale() {
      if (this.isResizeForBody) {
        this.style = {};
        document.querySelector('body').setAttribute('resize-boxy', 'resized');
        document.querySelector('body').setAttribute('style', `width:${this.width}px;height:${this.boxHeight()}px;zoom:${this.getScale()};`);
        document.querySelector('body').setAttribute('zoom', this.getScale());
        document.querySelector('body').setAttribute('proportion', this.getProportion());
        return;
      }
      this.style = {
        width: this.width + 'px',
        height: this.boxHeight() + 'px',
        // transform: 'scale(' + this.getScale() + ') translate(-50%, -50%)',
        transform: 'scale(' + this.getScale() + ')',
      }
    },
  },
}
</script>
  
<style >
.resize_body {
  width: 100%;
  height: 100%;
}

.resize_box {
  /* background-image: url('../../assets/img/background-home.png'); */
  background-repeat: no-repeat;
  background-size: 100%;
  transform-origin: 0 0;
  position: absolute;
  left: 0px;
  top: 0px;
  /* left: 50%;*/
  /*top: 50%; */
  transition: 0.3s;
  overflow: hidden;
}
</style>
  